<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="base-info__content">
    <div class="left">
      <el-form ref="form1Ref" :model="infoForm" size="small" :rules="rules" label-width="120">
        <el-row>
          <el-col :span="24">
            <el-form-item label="模型：" prop="modelName">
              <span>{{ infoForm.modelName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="no-wrap-formItem" label="业务场景：" prop="sceneName">
               <span>{{ infoForm.sceneName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="no-wrap-formItem" label="业务系统：" prop="systemName">
              <span>{{ infoForm.systemName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="no-wrap-formItem" label="要素库类型：" prop="databaseTypeName">
              <span>{{ infoForm.databaseTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="模型描述：" prop="description">
              <span>{{ infoForm.description }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-divider direction="vertical" style="height: 170px; margin-left: 20px;"></el-divider>
    <div class="right">
      <el-form ref="form2Ref" :model="infoForm" size="small" :rules="rules" label-width="120">
        <el-form-item label="数据所有者：" prop="dataOwnerId">
          <el-select
            style="width: 480px"
            v-model="infoForm.dataOwnerId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            @change="userChange"
            :loading="loading">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据安全级别：" prop="dataSafeLevel">
          <el-select style="width: 480px" v-model="infoForm.dataSafeLevel" placeholder="请选择" clearable>
            <el-option v-for="(val, key) in safeLevelDicts" :key="key" :value="key" :label="val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据保留政策：" prop="dataRetentionPolicy">
          <el-select style="width: 480px" v-model="infoForm.dataRetentionPolicy" placeholder="请选择" clearable>
            <el-option v-for="(val, key) in dataOwnerDicts" :key="key" :value="key" :label="val"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <el-divider></el-divider>
  <div class="tab-info-fields">
    <TreeTab :treeData="dataSource" />
  </div>
  <ModelChoose v-if="dialogVisible" :dialogVisible="dialogVisible" @handleEvent="handleEvent" />
</template>
<script setup name="TabsModel">
import ModelChoose from "@/components/ModelChoose";
import TreeTab from "./TreeTab.vue";
import { getBusinessSystemList } from '@/api/businessSystem';
import { getModellTree } from '@/api/metaData/model.ts';
import { getDicts } from '@/api/system/dict/data';
import { listUser } from '@/api/system/user';
import { getTreeList } from '@/api/databaseManagement';
const loading = ref(false);
const safeLevelDicts = ref({});
const dataOwnerDicts = ref({})
const infoForm = ref({});
const userList = ref([]);
const userListInit = ref([]);
const businessList = ref([]);
const systemList = ref([]);
const businessAll = ref([]);
const dialogVisible = ref(false);
const form2Ref = ref();
const form1Ref = ref();
const props = {
  expandTrigger: 'hover',
  emitPath: false,
  label: 'databaseName',
  value: 'id'
}
const currentNode = ref(null);
const dataSource = ref([]);
const rules = ref({
  sceneId: [{ required: true, message: '业务场景为空', trigger: 'blur' }],
  systemId: [{ required: true, message: '业务系统不能为空', trigger: 'blur' }],
  modelName: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
  databaseTypeId: [{ required: true, message: '要素库类型不能为空', trigger: 'blur' }],
  dataOwnerId: [{ required: true, message: '请选择数据所有者', trigger: 'blur' }],
  dataSafeLevel: [{ required: true, message: '请选择数据安全级别', trigger: 'blur' }],
  dataRetentionPolicy: [{ required: true, message: '数据保留政策', trigger: 'blur' }]
})
const typeOptions = ref([]);
const handleChange = (value) => {
  console.log(value)
}
const formValidate = async () => {
  
}
const initCardInfo = (info) => {
  infoForm.value.databaseTypeName = info?.isfdDatabaseTypeManagementVo?.databaseName;
  infoForm.value.sceneName = info?.sceneVo?.name;
  infoForm.value.systemName = info?.systemVo?.name;
  infoForm.value.modelName = info?.modelName;
  infoForm.value.description = info?.description;
  infoForm.value.modelId = info?.id;
  infoForm.value.sceneId = info?.sceneVo?.id;
  infoForm.value.systemId = info?.systemVo?.id;
  infoForm.value.databaseTypeId = info?.isfdDatabaseTypeManagementVo?.id;
  dataSource.value = [info];
}
const gotoChoose = () => {
  dialogVisible.value = true;
}
const handleEvent = (prop) => {
  if (prop.type == 'sure') {
    // console.log('modelInfo', prop.modelInfo)
    dataSource.value = [prop.modelInfo];
    const { modelName, id, versionNumber } = prop.modelInfo;
    infoForm.value.modelName = modelName;
    infoForm.value.modelId = id;
    infoForm.value.versionNumber = versionNumber;
  }
  dialogVisible.value = false;
}
const handleNodeClick = (node) => {
  currentNode.value = node;
}
const getBusinessList = () => {
  getBusinessSystemList({
    pageNum: 1,
    pageSize: 9999
  }).then(res => {
    businessAll.value = res.rows;
    businessList.value = res.rows.filter(item => item.type == 0)
  })
}
const getSystemList = (val) => {
  if (val) {
    systemList.value = businessAll.value.filter(item => item.parentId == val && item.type == 1)
  }
}
const queryTreeMenu = () => {
  getTreeList({name: ''}).then((res) => {
    if (res) {
      typeOptions.value = res|| []
    }
  });
};
// 查询类型字典
getDicts('metadata_constants').then((res) => {
  if (res.data) {
    let levelDicts = res.data.find(item => item.dictLabel == 'data_safe_level')?.dictValue;
    let ownerDicts = res.data.find(item => item.dictLabel == 'data_retention_policy')?.dictValue;
    safeLevelDicts.value = JSON.parse(levelDicts);
    dataOwnerDicts.value = JSON.parse(ownerDicts);
    infoForm.value.dataSafeLevel = Object.keys(safeLevelDicts.value)[0];
    infoForm.value.dataRetentionPolicy = Object.keys(dataOwnerDicts.value)[0];
  }
});
const userChange = () => {
  let fItem = userList.value.find(item => item.userId == infoForm.value.dataOwnerId);
  infoForm.value.dataOwnerName = fItem?.nickName || '';
}
function getUserList(query, init=false) {
  listUser({
    'pageNum': 1,
    'pageSize': 20,
    'userName': query
  }).then(res => {
    loading.value = false;
    if (!query) {
      userList.value = res.rows;
      userListInit.value = res.rows;
      if (init) {
        infoForm.value.dataOwnerId = userList.value[0]?.userId
      }
    } else {
      userList.value = res.rows;
    }
  })
}

function remoteMethod(query) {
  if (query !== '') {
    loading.value = true;
    getUserList(query)
  } else {
    userList.value = userListInit.value;
  }
}
onMounted(() => {
  getUserList('', true);
  getBusinessList();
  queryTreeMenu();
});
defineExpose({
  infoForm,
  form1Ref,
  form2Ref,
  initCardInfo 
});
</script>
<style lang="scss" scoped>
.base-info__content {
  display: flex;
}
// .el-form-item {
//   &.no-wrap-formItem {
//     flex-direction: column;
//   }
// } 
</style>
